---
breakpoint: tablet
title: Alignment
---

# Alignment

Every component in Bumbag Native has the ability to set an `alignX` or `alignY` prop, allowing the component to be aligned horizontally or vertically.

## Vertical alignment

```jsx-live
<Box alignY="center" border="default" height="250px">
  <Text>I am aligned to the center</Text>
</Box>
```

```jsx-live
<Box alignY="top" border="default" height="250px">
  <Text>I am aligned to the top</Text>
</Box>
```

```jsx-live
<Box alignY="bottom" border="default" height="250px">
  <Text>I am aligned to the bottom</Text>
</Box>
```

## Horizontal alignment

```jsx-live
<Box alignX="center" border="default">
  <Text>I am aligned to the center</Text>
</Box>
```

```jsx-live
<Box alignX="left" border="default">
  <Text>I am aligned to the left</Text>
</Box>
```

```jsx-live
<Box alignX="right" border="default">
  <Text>I am aligned to the right</Text>
</Box>
```
